<template>
  <div class="h-full flex flex-col">
    <a-card class="tableBuild">
      <!-- 新增按钮 -->
      <div class="mb-[20px]">
        <div
          style="display: flex; justify-content: flex-end; margin-bottom: 20px"
        >
          <a-button type="primary" icon="plus" @click="create()">{{
            $t("addhelptxt")
          }}</a-button>
        </div>
      </div>
      <!-- 主列表 -->
      <a-table
        ref="table"
        size="middle"
        class="h-full overflow-x-auto"
        :dataSource="listData"
        :pagination="false"
        @change="tableChange"
        :loading="listLoading"
        :rowKey="(record) => record.Id"
      >
        <a-table-column
          key="ConfigurationItemsContent"
          :title="$t('helptitle')"
        >
          <template slot-scope="text, record">
            <span>{{
              isLang
                ? record.ConfigurationItemsContent
                : record.ConfigurationItemsContentEn
            }}</span>
          </template>
          <!-- <span slot="title" class="min-w-90p">{{ $t( 'user.verification-code.required111566110577139') }}</span> -->
        </a-table-column>
        <a-table-column
          key="ConfigurationItemsAnnotation"
          data-index="ConfigurationItemsAnnotation"
        >
          <span slot="title" class="min-w-90p">{{
            $t("help.URL")
          }}</span>
        </a-table-column>
        <a-table-column
          key="ConfigurationItemsCreatetime"
          data-index="ConfigurationItemsCreatetime"
        >
          <span slot="title" class="min-w-90p">{{
            $t("user.verification-code.required11156611011")
          }}</span>
        </a-table-column>
        <a-table-column
          key="ConfigurationItemsUpdatetime"
          data-index="ConfigurationItemsUpdatetime"
        >
          <span slot="title" class="min-w-90p">{{
            $t("user.verification-code.required111566110577119")
          }}</span>
        </a-table-column>
       
        <a-table-column key="action" :title="$t('app.setting.othersettings')">
          <template slot-scope="text, record">
            <span>
              <!-- 修改按钮 -->
              <a-button type="link" @click="edit(record)">{{
                $t("user.verification-code.required111566147")
              }}</a-button>
              <!-- 删除按钮 -->
              <a-popconfirm
                :title="$t('user.verification-code.required111566110577225')"
                :ok-text="$t('user.verification-code.required1166')"
                :cancel-text="$t('user.email.required11')"
                @confirm="() => del(record.Id)"
              >
                <a-button type="link" size="small">{{
                  $t("app.setting.copy")
                }}</a-button>
              </a-popconfirm>
            </span>
          </template>
        </a-table-column>
      </a-table>
      <a-pagination
        size="small"
        v-model="pagination.current"
        :total="pagination.total"
        hideOnSinglePage
        :pageSize.sync="pagination.pageSize"
        @change="getList"
      />
    </a-card>
    <!-- 抽屉组件  ref绑定save  succeed绑定初始化的 init事件  -->
    <save ref="save" @succeed="init" />
  </div>
</template>

<script>
const columns = [
  {
    title: "名称",
    className: "min-w-90p",
    dataIndex: "ConfigurationItemsContent",
    align: "center",
  },
  {
    title: "创建时间",
    className: "min-w-90p",
    dataIndex: "ConfigurationItemsCreatetime",
    align: "center",
  },
  {
    title: "修改时间",
    className: "min-w-90p",
    dataIndex: "ConfigurationItemsUpdatetime",
    align: "center",
  },
  {
    title: "启用状态",
    className: "min-w-90p",
    dataIndex: "ConfigurationItemsEnableStatus",
    align: "center",
    scopedSlots: { customRender: "status" },
  },
  {
    title: "操作",
    width: "150px",
    dataIndex: "",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
];
// 引入save组件
import Save from "./components/save.vue";
import {
  configurationLists,
  configurationChangeStatus,
  configurationDelete,
} from "@/api/configs";
export default {
  name: "appid",
  // 挂载 save组件
  components: { Save },
  data() {
    return {
      columns: columns,
      /**table数据 */
      listData: [],
      // table的loading 状态
      listLoading: false,
      isLang: true,
      // 分页参数
      pagination: {
        current: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
        showTotal: (total) =>
          this.$t(
            "user.verification-code.required111566110577216",
            { total },
            "user.verification-code.required111566110577217"
          ),
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        console.log(lang);
        if (lang == "zh-EN") {
          that.isLang = false;
        } else {
          that.isLang = true;
        }
      }
    });
  },
  methods: {
    /**
     * 搜索事件 直接复制使用 通用的
     */
    search() {
      this.pagination.current = 1;
      this.getList();
    },
    // 分页事件 直接复制使用 通用的
    tableChange(pagination) {
      this.pagination = pagination;
      this.getList();
    },
    // 创建成功刷新列表 or 初始化事件 通用的 如果搜索条件有下拉列表 就需要放这里面
    init() {
      this.pagination.current = 1;
      this.getList();
    },
    async getList() {
      this.listLoading = true;
      const { current, pageSize } = this.pagination;
      try {
        // 调用查询列表
        const { data } = await configurationLists({
          ...{ page: current, pageSize, ConfigurationItemsState: 13 },
        });
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data;
        // 给table赋值
        this.listData = Lists || [];
        // 给分页数据赋值
        this.pagination = {
          current: Page,
          pageSize: PageSize,
          total: Total,
        };
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
   

    /**
     * 创建 通用的
     */
    create() {
      // 使用ref绑定的组件使用 this.$refs.save.open() 调用组件中的open方法
      // 创建不需要传递参数
      this.$refs.save.open();
    },
    /**
     * 修改 通用的
     * @param {*}
     */
    edit(data) {
      // 使用ref绑定的组件使用 this.$refs.save.open() 调用组件中的open方法
      // 修改需要传递参数 1代表是修改 data是表格里面传过来的参数
      this.$refs.save.open(1, data);
    },
    /**
     * 删除 通用的
     * @param {*} key
     */
    async del(id) {
      try {
        // 传过来的id直接请求删除api
        await configurationDelete({ Id: id });
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
        // 重新初始化列表刷新数据
        this.init();
      } catch (error) {
        this.$message.error(error);
      } finally {
      }
    },
  },
};
</script>

<style>
.ant-pagination {
  float: right;
}
</style>
